<template>
<div class="home" id="home" @scroll="handleScroll($event)">
  <div class="home-content" >
    <Drawer />
    <Header :class="backTop ? 'headerActive' : 'header' " />
    <Content/>
    <Footer/>
    <Box />
    <div 
      class="backTop" 
      v-if="backTop"  
      @click="backTopHandle"
    >
      <img src="@/assets/img/cat2.gif" alt="">
    </div>
  </div>
  
</div>   
</template>

<script lang="ts" setup>
import Header from '@/components/header/header.vue'
import Content from '@/components/content/content.vue'
import Footer from '@/components/footer/footer.vue'
import Box from '@/components/box/box.vue'
import Drawer from '@/components/drawer/drawer.vue'
import { ref } from 'vue'



const backTop = ref(false)
let dom:any ;  // 定义全局的变量，来记录滚动盒子的dom元素
let num = 0;
function handleScroll(e: any) {
  // console.log(e.srcElement.scrollTop || e.target.scrollTop)
  // console.log(e.srcElement.scrollTop)
  // console.log(e.target.scrollTop)
  // console.log(e.srcElement.offsetHeight)
  // console.log(e.srcElement.scrollHeight)

  num = e.target.scrollTop;        // 滚动条距离顶部的距离
  dom = e.target;  
  setTimeout(() => {
    if (num > 300) {
      backTop.value = true;        // 大于400，就显示
    } else {
      backTop.value = false;         // 小于400，就隐藏
    }
  }, 1000)   
  
}

function backTopHandle() {
  let time = setInterval(() => {
        if (num <= 0) {
          clearInterval(time); // 清空
        } else {
          num = num - 100;
          dom.scrollTop = num;
        }
      }, 3);
}


</script>

<style scoped lang="less">
  
  .home {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: scroll;
    scroll-behavior: smooth;

    .home-content {
      width: 100%;
      height: 100vh;
      position: absolute;
      
    }
    .backTop {
      position: fixed;
      bottom: 100px;
      right: 100px;
      width: 50px;
      height: 50px;
      cursor: pointer;
      img {
        border-radius: 30px;
        width: 100px;
        height: auto;
      }
    }
  }
  .home::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    .home::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: #a7eaf4;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }

.home::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
}

.header {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  color: #000000;
  transition:all 1s ease-in-out 0s;
  transform:translateY(-110%);
}
.headerActive {
  width: 100%;
  background-color: #a4a1a250;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  transition:all 1s ease-in-out 0s;
  transform:translateY(-10%);
}

</style>
